<template>
  <scroll-view class="container" scroll-y="true" @scrolltolower="onScrollToLower">
    <!--    <tn-select v-model="searchInfo.showDeliveryCycle" mode="single" :list="list"-->
    <!--               @confirm="result => searchInfo.deliveryCycle = result[0]"/>-->
    <tn-select v-model="searchInfo.showShop" mode="single" :list="executeOptions"
               @confirm="selectShopOption"/>
    <tn-select v-model="searchInfo.showTag" mode="single" :list="tagOptions"
               @confirm="selectTagOption"/>
    <tn-select v-model="searchInfo.showExecutor" mode="single" :list="executorOption"
               @confirm="selectExecutor"/>
    <view class="searchBox">
      <!--      <view class="searchBtn" @click="searchInfo.showDeliveryCycle = true">-->
      <!--        {{ searchInfo.deliveryCycle.label }}-->
      <!--      </view>-->
      <view class="searchBtn" @click="searchInfo.showShop = true">
        {{ searchInfo.shopInfo.label }}
      </view>
      <view class="searchBtn" @click="searchInfo.showTag = true">
        {{ searchInfo.tagInfo.label }}
      </view>
      <view class="searchBtn" @click="searchInfo.showExecutor = true">
        {{ searchInfo.executorInfo.label }}
      </view>
    </view>
    <view class="clearSelect" @click="clearSearch">
      清空选择
    </view>
    <view class="content">
      <view class="cTop">
        <view class="statusSelect">
          <view :class="queryListParam.status === item.value ? 'item active':'item'" v-for="(item,index) in taskFinish"
                :key="index"
                @click="changeTab(item, item.value)">
            <view>{{ item.name }}</view>
            <view class="line"></view>
          </view>
        </view>
      </view>
      <view class="list">
        <view class="itemTask" v-for="(item,index) in taskList" :key="index">
          <view class="iTop">
            <view class="taskName">
              {{ item.name }}
            </view>
            <view class="deadline" v-if="queryListParam.status === 2">
              {{ item.startTime }}
            </view>
            <view class="deadline" v-if="queryListParam.status === 1">
              {{ item.deadline }}
            </view>
          </view>
          <view class="tag" v-if="item.tagList && item.tagList.length>0">
            <view class="tagItem" v-for="(tag, index) in item.tagList" :key="index">
              {{ tag || "无" }}
            </view>
          </view>
          <view class="address" v-if="item.addressList && item.addressList.length>0">
            <view class="addressItem" v-for="(address, index) in item.addressList" :key="index">
              {{ address }}
            </view>
          </view>
          <view class="specific" v-if="item.specificTask">
            {{ item.specificTask }}
          </view>
          <view class="cInfo">
            <view class="executor">
              <text>{{ item.executorName }}</text>
            </view>
            <view class="finish" v-if="queryListParam.status === 1" @click="finishTask(item.id)">
              完成任务
            </view>
          </view>
        </view>
      </view>
    </view>
    <tn-modal v-model="showFinishTaskModal" title="确定完成任务?" :content="finishTaskTip" :button="finishTaskButton"
              @click="confirmFinishTask"/>
  </scroll-view>
</template>

<script>
import {finishTask, taskDistributionList} from "@/apis/TaskDistribution";
import {warehouseOptions} from "@/apis/Warehouse";
import {shopOptions} from "@/apis/Shop";
import {tagOptions} from "@/apis/Tag";
import {value} from "lodash/seq";
import {optionsUser} from "@/apis/User";

export default {
  data() {
    return {
      queryListParam: {
        pageNum: 1,
        pageSize: 10,
        status: 1,
        addressType: null,
        addressCode: null,
        tagCode: null,
        H5NotShopFinishTaskAddress: true,
        executorCode: null
      },
      taskFinish: [{
        name: '未完成',
        value: 1
      }, {
        name: '未开始',
        value: 2
      }],
      taskList: [],
      searchInfo: {
        showDeliveryCycle: false,
        deliveryCycle: {
          label: '选择周期',
          value: null
        },
        showShop: false,
        shopInfo: {
          label: '选择位置',
          value: null
        },
        showTag: false,
        tagInfo: {
          label: '选择标签',
          value: null
        },
        showExecutor: false,
        executorInfo: {
          label: '选择执行人',
          value: null
        },
      },
      executeOptionsMap: {},
      executeOptions: [],
      executorOption: [],
      tagOptions: [],
      finishTaskButton: [
        {
          text: '取消',
          backgroundColor: '#82BA26',
          fontColor: '#FFFFFF',
          shape: 'round'
        },
        {
          text: '确定',
          backgroundColor: 'tn-bg-indigo',
          fontColor: '#FFFFFF'
        }
      ],
      showFinishTaskModal: false,
      finishTaskTip: null,
      finishId: null
    }
  },
  methods: {
    // 任务列表变更, 重新获取数据
    async changeTaskList() {
      this.taskList = await this.getTaskList()
    },
    // 后台获取数据转换
    async getTaskList() {
      const taskListData = await taskDistributionList(this.queryListParam)
      if (taskListData.data.items && taskListData.data.items.length > 0) {
        return taskListData.data.items.map(item => {
          return {
            id: item.code,
            name: item.name,
            deadline: item.deadline,
            startTime: item.startTime,
            tagList: item.tagCodeList,
            executorName: item.executorName,
            addressList: item.address,
            specificTask: item.specificTask
          }
        })
      }
      return []
    },
    // 查看不同状态任务
    async changeTab(item, index) {
      this.queryListParam.status = index;
      this.queryListParam.pageNum = 1
      await this.changeTaskList()
    },

    // 清空选择
    clearSearch() {
      this.searchInfo = {
        showDeliveryCycle: false,
        deliveryCycle: {
          label: '选择周期',
          value: null
        },
        showShop: false,
        shopInfo: {
          label: '选择位置',
          value: null
        },
        showTag: false,
        tagInfo: {
          label: '选择标签',
          value: null
        },
        showExecutor: false,
        executorInfo: {
          label: '选择执行人',
          value: null
        },
      }
      this.queryListParam = {
        pageNum: 1,
        pageSize: 10,
        status: 1,
        addressType: null,
        addressCode: null,
        tagCode: null
      }
      this.changeTaskList()
    },
    // 完成任务
    finishTask(id) {
      this.finishId = id
      let taskAddress = "所有执行位置"
      if (this.searchInfo.shopInfo.value) {
        taskAddress = this.searchInfo.shopInfo.label
      } else if (this.searchInfo.deliveryCycle.value) {
        taskAddress = this.searchInfo.deliveryCycle.label
      }
      this.showFinishTaskModal = true
      this.taskList.forEach(model => {
        if (model.id === id) {
          this.finishTaskTip = model.name + " " + taskAddress
        }
      })
    },

    // 提交任务
    async confirmFinishTask(bottom) {
      if (bottom.index === 1) {
        await finishTask({
          status: 3,
          addressType: this.executeOptionsMap[this.searchInfo.shopInfo.value],
          addressCode: this.searchInfo.shopInfo.value,
        }, this.finishId)
      }
      this.showFinishTaskModal = false
      await this.changeTaskList()
    },

    // 下滑到小程序最下面时加载下一页数据
    async onScrollToLower() {
      this.queryListParam.pageNum += 1
      const taskListData = await this.getTaskList();
      if (taskListData && taskListData.length > 0) {
        taskListData.forEach(model => {
          this.taskList.push(model)
        })
      }
    },
    // 选中标签搜索
    selectTagOption(result) {
      this.queryListParam.tagCode = result[0].value
      this.searchInfo.tagInfo = result[0]
      this.changeTaskList()
    },

    selectShopOption(result) {
      this.queryListParam.addressCode = result[0].value
      this.queryListParam.addressType = this.executeOptionsMap[result[0].value]
      this.searchInfo.shopInfo = result[0]
      this.changeTaskList()
    },
    selectExecutor(result) {
      this.queryListParam.executorCode = result[0].value
      this.searchInfo.executorInfo = result[0]
      this.changeTaskList()
    }
  },
  async mounted() {
    await this.changeTaskList();
    const executeAddressWarehouse = await warehouseOptions()
    const executeAddressShop = await shopOptions()
    const tagOption = await tagOptions()
    const executorOptionData = await optionsUser()

    this.executorOption = executorOptionData.data
    this.tagOptions = tagOption.data
    if (executeAddressShop.data && executeAddressShop.data.length > 0) {
      executeAddressShop.data.forEach(model => {
        this.executeOptions.push(model)
        this.executeOptionsMap[model.value] = 2
      })
    }
    if (executeAddressWarehouse.data && executeAddressWarehouse.data.length > 0) {
      executeAddressWarehouse.data.forEach(model => {
        this.executeOptions.push(model)
        this.executeOptionsMap[model.value] = 1
      })
    }
  },

}
</script>
<style>
page {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

// 去掉页面滚动条
::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>
<style lang="less" scoped>
.dflex() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dflexsb() {
  .dflex();
  justify-content: space-between;
}

.dflexsa() {
  .dflex();
  justify-content: space-around;
}

.container {
  height: 90vh;
  width: 100%;
  font-family: PingFangSC-Semibold, PingFang SC;
  padding: 30rpx;
  box-sizing: border-box;
  overflow: hidden !important;
  background: #f8f8f8;
  color: #333;

  .searchBox {
    .dflexsb();
    width: 100%;
    padding: 10rpx;
    box-sizing: border-box;

    .searchBtn {
      padding: 16rpx 0rpx;
      box-sizing: border-box;
      background-color: #47cfc8;
      min-width: 140rpx;
      .dflex();
      color: #fff;
      font-size: 26rpx;
      border-radius: 40rpx;
    }
  }

  .clearSelect {
    padding: 16rpx 0rpx;
    box-sizing: border-box;
    background-color: #808080;
    color: #fff;
    font-size: 26rpx;
    border-radius: 40rpx;
    .dflex
  }

  .content {
    height: 100%;
    overflow-y: scroll;

    .cTop {
      .dflexsb();
      padding: 20rpx 0rpx;
      box-sizing: border-box;

      .statusSelect {
        .dflex();
        justify-content: flex-start;
        height: 80rpx;

        .item {
          width: 120rpx;
          color: #333;
          font-size: 26rpx;
          height: 80rpx;
          .dflex();
          flex-direction: column;
          background-color: transparent !important;

          .line {
            width: 30rpx;
            height: 30rpx;
            border-radius: 90%;
            border-bottom: 4rpx solid transparent;
            transition: all 0.3s linear;
          }

          &.active {
            font-size: 28rpx;
          }

          &.active .line {
            border-bottom: 4rpx solid #47cfc8;
          }
        }
      }
    }

    .list {
      height: 100%;
      overflow-y: scroll;
      padding-bottom: 300rpx;
      box-sizing: border-box;
    }

    .itemTask {
      padding: 30rpx;
      box-sizing: border-box;
      background: #fff;
      border-radius: 60rpx;
      margin-bottom: 30rpx;

      .iTop {
        font-size: 26rpx;
        font-weight: bolder;
        padding: 0rpx 10rpx;
        box-sizing: border-box;
        .dflexsb();

        .taskName {
          width: 60%;
        }

        .deadline {
          flex: 1;
          color: red;
          .dflex();
          justify-content: flex-end;
        }
      }

      .tag {
        .dflex();
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 20rpx;

        .tagItem {
          padding: 4rpx 14rpx;
          box-sizing: border-box;
          background: #dbfcf3;
          margin-right: 14rpx;
          border-radius: 12rpx;
          .dflex();
          font-size: 22rpx;
        }
      }

      .address {
        .dflex();
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 20rpx;

        .addressItem {
          padding: 4rpx 14rpx;
          box-sizing: border-box;
          background: #1d9aff;
          margin-right: 14rpx;
          border-radius: 12rpx;
          .dflex();
          font-size: 22rpx;
        }
      }

      .specific {
        font-size: 26rpx;
        color: #bebebe;
        margin-top: 20rpx;
        padding: 0rpx 20rpx 0rpx 0rpx;
        box-sizing: border-box;
      }

      .cInfo {
        .dflexsb();
        margin-top: 24rpx;

        .executor {
          width: 70%;
          .dflex();
          justify-content: flex-start;
        }

        .finish {
          width: 100%;
          .dflex();
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>
